<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <!--    <meta name="keywords" content="jQuery,easyform,form validation,javascript,js,jq,jquery,表单验证,插件">-->
    <!--    <meta name="description" content="jQuery.Easyform表单验证插件">-->

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>华鑫农业信息管理系统</title>
    <link rel="stylesheet" type="text/css" href="style/css.css">
    <link href="style/search.css" rel="stylesheet">
    <link rel="icon" href="images/tubiao.ico" type="image/ico">

    <link href="style/bootstrap.min.css" rel="stylesheet">
    <link href="style/materialdesignicons.min.css" rel="stylesheet">
    <link href="style/style.min.css" rel="stylesheet">

    <link rel="stylesheet" href="style/platform-1.css">
    <link rel="stylesheet" href="js/easyform/easyform.css">

    <link rel="stylesheet" href="style/tab.css">
    <script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>
    <script type="text/javascript" src="js/easyform/easyform.js"></script>

    <style>
        .lyear-wrapper {
            position: relative;
            background-color: white;

        }

        .lyear-login {
            display: flex !important;
            min-height: 100vh;
            align-items: center !important;
            justify-content: center !important;
            background-color: white;
        }

        .lyear-login:after {
            content: '';
            min-height: inherit;
            font-size: 0;
        }

        .login-center {
            background-color: white;
            min-width: 40.25rem;
            /*padding: 0.14286em 0.57143em;*/
            border-radius: 3px;
            /*margin-top: -310px;*/
            /*margin-bottom: 150px;*/
        }

        .login-header {
            margin-bottom: 1.5rem !important;
        }

        .login-center .has-feedback.feedback-left .form-control {
            padding-left: 38px;
            padding-right: 12px;
            background-color: rgba(255, 255, 255, .075);
            border-color: rgba(0, 0, 0, .8)
        }

        .login-center .has-feedback.feedback-left .form-control-feedback {
            left: 0;
            right: auto;
            width: 38px;
            height: 38px;
            line-height: 38px;
            z-index: 4;
            color: #dcdcdc;
        }

        .login-center .has-feedback.feedback-left.row .form-control-feedback {
            left: 15px;
        }

        .login-center .form-control::-webkit-input-placeholder {
            color: rgba(0, 0, 0, .8);
        }

        .login-center .form-control:-moz-placeholder {
            color: rgba(255, 255, 255, .8);
        }

        .login-center .form-control::-moz-placeholder {
            color: rgba(255, 255, 255, .8);
        }

        .login-center .form-control:-ms-input-placeholder {
            color: rgba(255, 255, 255, .8);
        }

        .login-center .custom-control-label::before {
            background: rgba(255, 255, 255, 0.3);
            border-color: rgba(255, 255, 255, 0.1);
        }

        .login-center .lyear-checkbox span::before {
            border-color: rgba(255, 255, 255, .75)
        }
    </style>
</head>
<body>
<div class="row lyear-wrapper">
    <!--    <div class="lyear-login">-->
    <div style="background-color: white">
        <div class="login-center">
            <div class="login-header text-center">
                <img alt="请注册" src="images/top.png">
            </div>
            <div>
                <h1 style="text-align: center">用户注册</h1>
            </div>
        </div>
    </div>

    <div class="form-div">
        <form id="reg-form" action="" method="post">

            <table>
                <tr>
                    <td>用户名</td>
                    <td><input name="uid" type="text" id="uid"
                               data-easyform="length:4 16;char-normal;real-time;ajax:ajax_demo(1);"
                               data-message="用户名必须为4—16位的英文字母或数字"
                               data-easytip="position:top;class:easy-blue;" data-message-ajax="用户名已存在!">
                    </td>
                </tr>
                <tr>
                    <td>密码</td>
                    <td><input name="psw1" type="password" id="psw1" data-easyform="length:6 16;"
                               data-message="密码必须为6—16位"
                               data-easytip="class:easy-blue;"></td>
                </tr>
                <tr>
                    <td>确认密码</td>
                    <td><input name="psw2" type="password" id="psw2" data-easyform="length:6 16;equal:#psw1;"
                               data-message="两次密码输入要一致" data-easytip="class:easy-blue;"></td>
                </tr>
                <tr>
                    <td>email</td>
                    <td><input name="email" type="text" id="email" data-easyform="email;real-time;easytip:false;"
                               data-message="Email格式要正确"
                               data-easytip="class:easy-blue;"></td>
                </tr>
                <tr>
                    <td>昵称</td>
                    <td><input name="nickname" type="text" id="nickname" data-easyform="length:2 16;"
                               data-easytip="class:easy-blue;position:bottom;"></td>
                </tr>
            </table>

            <div class="buttons" style="margin-top: 50px;">
                <input value="注 册" type="submit" style="margin-right:20px; margin-top:20px;">
                <input value="我有账号，我要登录" type="button" style="margin-right:45px; margin-top:20px;">
            </div>

            <br class="clear">
        </form>
    </div>

    <div class="links">
        <div class="link_img left"><img src="images/link.png" alt="友情链接"/></div>
        <div class="linkcon left"><a href="https://jw.xpu.edu.cn/">西安工程大学教务处</a> | <a
                href="https://www.xpu.edu.cn/">西安工程大学门户网站</a>
        </div>
        <div class="clear"></div>
        <!-- content end -->
<!--        <div class="footer">-->
<!--            <div class="f_link"><a href="index.html">首页</a> | <a href="gsjj.html">公司简介</a> | <a-->
<!--                    href="cpzs.html">产品展示 </a> | <a-->
<!--                    href="news.html">新闻动态</a> | <a href="zxly.html">在线留言</a> | <a href="lxwm.html">联系我们</a></div>-->
<!--            <div class="f_text"><img src="images/ewm.png" alt="二维码"-->
<!--                                     style="float:right;"/>地址：陕西省西安市临潼区　　邮箱：1576397008@qq.com<br/>-->
<!--                Copyright @ 2020.12-->
<!--                <div class="clear"></div>-->
<!--            </div>-->
<!--        </div>-->

    </div>
</div>


<script>

    $(document).ready(function () {
        var v = $('#reg-form').easyform();

        $('#demo-form').easyform();

        v.is_submit = false;

        v.error = function (ef, i, r) {
            //console.log("Error事件：" + i.id + "对象的值不符合" + r + "规则");
        };

        v.success = function (ef) {
            //console.log("成功");
        };

        v.complete = function (ef) {
            console.log("完成");
        };

        $('#tip-test1').easytip();
        $('#tip-test2').easytip();
        $('#tip-test3').easytip();
        $('#tip-test4').easytip();


    });

    function ajax_demo(p) {
        $("#uid").trigger("easyform-ajax", true);
    }

</script>

</body>
</html>
